<template>
  <!-- 整车销售单选择 -->
  <div>
    <TopFilter :list="topFilterList" :cols="3" @filterChange="changeHandle"></TopFilter>
    <FilterTable
      ref="table"
      height="auto"
      :fetchapi="fetchapi"
      :params="fetchParams"
      :datakey="'records'"
      :columns="columns"
      selectionType="single"
      :onRowSelectChange="handleRowSelectChange"
      :onColumnsChange="columns => (this.columns = columns)"
    >
    </FilterTable>
    <div class="btnWrap">
      <el-button @click="handleCancle">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
  </div>
</template>

<script>
import { notifyAction } from '@/utils';
import { queryCarOrderList } from '@/api/part/qualityManagement/decorationDispatchOrder';

queryCarOrderList;
export default {
  data() {
    return {
      columns: this.createTableColumns(),
      topFilterList: this.createTopFilterList(),
      fetchapi: queryCarOrderList,
      fetchParams: { xhrAbort: false },
      selectedRow: []
    };
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          fieldName: 'viNo',
          label: '销售订单号'
        },
        {
          type: 'INPUT',
          fieldName: 'vin',
          label: '底盘号'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '销售单号',
          dataIndex: 'viNo'
        },
        {
          title: 'vin码',
          dataIndex: 'vin'
        },
        {
          title: '车型代码',
          dataIndex: 'modelCode'
        },
        {
          title: '车型名称',
          dataIndex: 'modelName'
        },
        {
          title: '客户代码',
          dataIndex: 'customerCode'
        },
        {
          title: '客户名称',
          dataIndex: 'customerName'
        }
      ];
    },
    // table选择变化
    handleRowSelectChange(e) {
      this.selectedRow = e;
    },
    // 点击重置或者搜索
    changeHandle(e) {
      this.fetchParams.xhrAbort = true;
      this.fetchParams = Object.assign(this.fetchParams, e, {
        xhrAbort: false
      });
    },
    handleConfirm() {
      if (this.selectedRow.length) {
        this.$emit('onConfirm', this.selectedRow[0]);
        this.handleCancle();
      } else {
        notifyAction('请选择数据', 'warning');
      }
    },
    // 关闭弹窗
    handleCancle() {
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
